<template>
  <div>
    <div class="input">
      <div class="emoji">
      <img
        @click="show_emoji"
        src="@/assets/img/square/表情.svg"
        alt=""
      />
      </div>
      <textarea
      class="msg"
      name="input"
      id=""
      cols="35"
      rows="2"
      v-model="message"
      ></textarea>
      <button class="send" @click="send">send</button>
    </div>
    <div v-show="isShowEmoji" class="show-emoji">
    <img
      v-for="(item, index) in emojis"
      :src="
        `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${item.file}`
      "
      alt=""
      @click="choose_emoji(item,index)"
    />
    </div>
  </div>
  
</template>

<script>
import {emojis} from '../../../../common/emoji'
export default {
  name: "",
  data() {
    return {
      isShowEmoji: false,
      message: "",
      emojis:emojis
    };
  },
  computed:{
    _id() {//用户自己id
      return this.$store.getters.user._id || JSON.parse(localStorage.getItem('userInfo'))._id ||'';
    },
    userInfo(){
     return this.$store.getters.user || JSON.parse(localStorage.getItem('userInfo'))||''
   }
  },
  methods: {
    //点击发送
    send() {
      let msg = this.message;
      if (!msg.trim().length) {
        return;
      }
      let data = {
        send_id:this._id,
        msgType:1,
        msg:msg,
        avatar:this.userInfo.avatar,
        nickname:this.userInfo.nickname,
        dateTime:new Date().getDate()
      }
      this.$bus.$emit("public", data);
      this.message = "";
      if(this.isShowEmoji){
      this.isShowEmoji = false
      }
    },
    //显示表情选择
    show_emoji() {
      this.isShowEmoji = !this.isShowEmoji;
    },
    //选择表情
    choose_emoji(item,index){
      // console.log(item,index)
      this.message += item.mark
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input {
  padding: 5px 5px;
  background-color: #eee;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 2;
}
.emoji {
  width: 40px;
  height: 40px;
}
.emoji img {
  width: 100%;
  height: 100%;
}
.msg {
  border: 0px;
  margin-left: 5px;
  font-size: 16px;
}
.send {
  height: 30px;
  flex: 1;
  text-align: center;
  background-color: green;
  color: white;
  line-height: 30px;
  border-radius: 5px;
}
.show-emoji{
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 44px;
}
</style>
